<template>
  <div class="headpagebox">
    <!-- <div class="total">
      <div v-for="(item, index) in total" :key="item.id">
        <div>
          <span>{{ item.name }}</span>
          <span :style="'color:' + colors[index]">{{ item.num }}</span>
        </div>
        <div
          class="echarts"
          style="width: 100px; height: 100%; padding-right: 32px"
          id="mychart"
        ></div>
      </div>
       
    </div> -->
    <div class="alltotal">
      <allstudent></allstudent>
      <allteach></allteach>
      <alldormitory></alldormitory>
      <allclasses></allclasses>
    </div>
    <!-- 中间部分 -->
    <div class="middle">
      <div class="sushengdengji">
        <!-- 宿舍升级 -->
        <div class="dengji">
          <subTitle name="升级星级宿舍"></subTitle>
          <susheshengji></susheshengji>
        </div>
        <!-- 宿舍升级 -->
        <div class="dengji">
          <subTitle name="降级星级宿舍"></subTitle>
          <sushejiangji></sushejiangji>
        </div>
      </div>
      <div class="middleright">
        <div class="shixiangbanli">
          <subTitle name="事情办理情况"></subTitle>
          <banliqingkuang></banliqingkuang>
        </div>
        <div class="sushechart">
          <subTitle name="星级宿舍增减曲线"></subTitle>
          <sushexingjiquxian></sushexingjiquxian>
        </div>
      </div>
    </div>
    <!-- 下面部分 -->
    <div class="bottom">
      <div class="tishi">
        <subTitle name="消息提醒"></subTitle>
        <xiaoxitixing></xiaoxitixing>
      </div>
      <div class="zhanbi">
        <subTitle name="星级宿舍占比"></subTitle>
        <sushezhanbiecharts></sushezhanbiecharts>
      </div>
      <div class="chengxin">
        <div class="chengxinimg">
          <img src="../assets/img/档案袋@2x.png" alt="" /><span>诚信档案</span>
        </div>
        <div class="zizhuimg">
          <img src="../assets/img/资助档案袋@2x.png" alt="" /><span
            >资助档案</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import subTitle from "../components/title/subTitle.vue";
import susheshengji from "../components/xitongshouye/susheshengji.vue";
import sushejiangji from "../components/xitongshouye/sushejiangji.vue";
import xiaoxitixing from "../components/xitongshouye/xiaoxitixing.vue";
import banliqingkuang from "../components/xitongshouye/banliqingkuang.vue";
import sushezhanbiecharts from "../components/echarts/sushezhanbiecharts.vue";
import sushexingjiquxian from "../components/echarts/sushexingjiquxian.vue";
import allstudent from "../components/echarts/Allstudent.vue";
import alldormitory from "../components/echarts/Alldormitory.vue";
import allteach from "../components/echarts/Allteach.vue";
import allclasses from "../components/echarts/Allclasses.vue";
export default {
  components: {
    subTitle,
    susheshengji,
    sushejiangji,
    xiaoxitixing,
    banliqingkuang,
    sushezhanbiecharts,
    sushexingjiquxian,
    allstudent,
    allclasses,
    alldormitory,
    allteach,
  },
  data() {
    return {
      colors: ["#5B8FF9", "#5AD8A6", "#F6BD16", "#E86452"],
      total: [
        { id: 1, name: "学生总数", num: "13000" },
        { id: 2, name: "教师总数", num: "8000" },
        { id: 3, name: "宿舍总数", num: "3000" },
        { id: 4, name: "班级总数", num: "1000" },
      ],
    };
  },
  mounted() {
    // this.getEchartData();
  },
  methods: {
    // getEchartData() {
    //   // for (let i = 0; i < this.total.length; i++) {
    //   //   }
    //   const chart = document.querySelector("#mychart");
    //   console.log(chart);
    //   if (chart) {
    //     const myChart = this.$echarts.init(chart);
    //     const option = {
    //       animation: false,
    //       series: [
    //         {
    //           type: "pie",
    //           radius: ["65%", "90%"],
    //           avoidLabelOverlap: false,
    //           labelLine: {
    //             show: false,
    //           },
    //           color: ["#5B8FF9", "#D8D8D8"],
    //           data: [
    //             { value: 75, name: "搜索引擎" },
    //             { value: 25, name: "直接访问" },
    //           ],
    //         },
    //       ],
    //       graphic: [
    //         //为环形图中间添加文字
    //         {
    //           type: "text",
    //           left: "center",
    //           top: "center",
    //           style: {
    //             text: "75%",
    //             textAlign: "center",
    //             fill: "#32373C",
    //             fontSize: 14,
    //           },
    //         },
    //       ],
    //     };
    //     myChart.setOption(option);
    //     window.addEventListener("resize", function () {
    //       myChart.resize();
    //     });
    //   }
    //   this.$on("hook:destroyed", () => {
    //     window.removeEventListener("resize", function () {
    //       myChart.resize();
    //     });
    //   });
    // },
  },
};
</script>

<style lang="less" scoped>
.headpagebox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  // background: aquamarine;
}
// .total {
//   display: flex;
//   flex-direction: row;
//   justify-content: space-between;
//   width: 100%;
//   height: 88px;
//   // background: violet;
//   div {
//     display: flex;
//     flex-direction: row;
//     justify-content: space-between;
//     width: 400px;
//     height: 100%;
//     background: #fff;
//     border-radius: 9px;
//     div:first-of-type {
//       display: flex;
//       flex-direction: column;
//       text-align: center;
//       width: 30%;
//       height: 60px;
//       padding: 14px 47px;
//       justify-content: space-between;
//       span:first-of-type {
//         font-size: 19px;
//         font-family: fantasy;
//       }
//       span:last-of-type {
//         color: #5b8ff9;
//         font-size: 21px;
//         font-weight: 900;
//       }
//     }
//   }
// }
.alltotal {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}
.middle {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 476px;
  // background: greenyellow;
  .sushengdengji {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 953px;
    height: 100%;
    background: #f5f5f5;
    .dengji {
      height: 228px;
      background: #fff;
      border-radius: 9px;
    }
  }
  .middleright {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 702px;
    height: 100%;
    .shixiangbanli {
      height: 124px;
      width: 100%;
      background: #fff;
      border-radius: 9px;
    }
    .sushechart {
      width: 100%;
      height: 329px;
      background: #fff;
      border-radius: 9px;
    }
  }
}
.bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 227px;
  // background: honeydew;
  > div {
    height: 100%;
    border-radius: 9px;
    background: #fff;
  }
  .tishi {
    width: 852px;
  }
  .zhanbi {
    width: 540px;
  }
 
  .chengxin {
    width: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    .chengxinimg,
    .zizhuimg {
      cursor: pointer;
      height: 78px;
    }
    img {
      margin-left: 11px;
      width: 40px;
    }
    span {
      text-align: center;
      display: block;
      color: #333;
      font-size: 16px;
      line-height: 30px;
      font-family: PingFang Regular;
      font-weight: 600;
    }
  }
}
</style>